<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">登录日志</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>登录日志</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            账号：
            <input id="logr-edt-account" class="layui-input search-input" type="text" placeholder="请输入账号"/>&emsp;
            日期：
            <input id="logr-edt-date" class="layui-input search-input date-icon" type="text" placeholder="请选择日期范围"
                   style="width: 195px;"/>&emsp;
            <button id="logr-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>

        <table class="layui-table" id="logr-table" lay-filter="logr-table"></table>
    </div>
</div>

<script>
    layui.use(['laydate', 'table', 'util', 'config'], function () {
        var laydate = layui.laydate;
        var table = layui.table;
        var config = layui.config;
        var util = layui.util;

        //渲染表格
        table.render({
            elem: '#logr-table',
            url: config.base_server + 'loginRecord',
            // where: {
            //     access_token: config.getToken().access_token
            // },
            page: true,
            cols: [[
                {type: 'numbers'},
                {field: 'username', sort: true, title: '账号'},
                {field: 'nickName', sort: true, title: '用户名'},
                {field: 'ipAddress', sort: true, title: 'IP'},
                {field: 'device', sort: true, title: '设备'},
                {field: 'osName', sort: true, title: '设备类型'},
                {field: 'browserType', sort: true, title: '浏览器'},
                {
                    field: 'createTime', sort: true, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '登录时间'
                }
            ]]
        });

        //时间范围
        laydate.render({
            elem: '#logr-edt-date',
            type: 'date',
            range: true,
            theme: 'molv'
        });

        //搜索按钮点击事件
        $('#logr-btn-search').click(function () {
            var searchDate = $('#logr-edt-date').val().split(' - ');
            var searchAccount = $('#logr-edt-account').val();
            table.reload('logr-table', {
                where: {
                    startDate: searchDate[0],
                    endDate: searchDate[1],
                    account: searchAccount
                }
            });
        });
    });
</script>